<template>
  <el-dialog
    title="编辑链接条件"
    :visible.sync="visible"
    width="600px"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    :append-to-body="true"
    :destroy-on-close="true"
    :before-close="handleClose"
  >
    <el-row v-for="(i,index) in rows" :key="index" :gutter="8">
      <el-col :span="10">
        <formColChiose
          v-model="i.ColId"
          :label.sync="i.label"
          :show-mode="[0]"
          :form-id="curFormId"
          :limit-table-id="curTableId"
          :is-sys-col="true"
          :is-mulite="false"
        />
      </el-col>
      <el-col :span="2" style="text-align: center;line-height: 38px;">
        <span>=</span>
      </el-col>
      <el-col :span="10">
        <formColChiose
          v-model="i.ToColId"
          :label.sync="i.toLabel"
          :show-mode="[0]"
          :form-id="toFormId"
          :limit-table-id="toTableId"
          :is-sys-col="true"
          :is-mulite="false"
        />
      </el-col>
      <el-col :span="2" style="text-align: center;">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="add(e.row)" />
        <el-button v-if="index != 0" type="danger" size="mini" icon="el-icon-delete" circle @click="drop(e.row)" />
      </el-col>
    </el-row>
    <div slot="footer" style="text-align: center">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="reset">重置</el-button>
    </div>
  </el-dialog>
</template>

<script>
import formColChiose from '@/customForm/components/form/formColChiose.vue'
export default {
  components: {
    formColChiose
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    joinOn: {
      type: Object,
      default: null
    },
    formId: {
      type: String,
      default: null
    },
    tableId: {
      type: String,
      default: null
    },
    toFormId: {
      type: Array,
      default: null
    },
    toTableId: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      curFormId: null,
      curTableId: null,
      rows: []
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.reset()
        } else {
          this.viewModel = {}
        }
      },
      immediate: true
    },
    formId: {
      handler(val) {
        if (val) {
          this.curFormId = [val]
        } else {
          this.curFormId = []
        }
      },
      immediate: true
    },
    tableId: {
      handler(val) {
        if (val) {
          this.curTableId = [val]
        } else {
          this.curTableId = []
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    handleClose() {
      this.$emit('update:visible', false)
    },
    save() {
      const data = {
        item: {},
        show: ''
      }
      this.rows.forEach(e => {
        if (e.ColId && e.ToColId) {
          data.item[e.ColId] = e.ToColId
          data.show = data.show + e.label + '=' + e.toLabel + '\n'
        }
      })
      if (data.show === '') {
        this.$message({
          message: '链接条件不能为空!',
          type: 'error'
        })
        return
      }
      this.handleClose()
      this.$emit('save', data)
    },
    reset() {
      const list = []
      if (this.joinOn) {
        for (const i in this.joinOn) {
          if (this.joinOn[i]) {
            list.push({
              ColId: i,
              label: null,
              toLabel: null,
              ToColId: this.joinOn[i]
            })
          }
        }
      }
      if (list.length === 0) {
        list.push({
          ColId: null,
          label: null,
          toLabel: null,
          ToColId: null
        })
      }
      this.rows = list
    }
  }
}
</script>

